<template>
  <div class="dashboard">
    <span>这是二级路由的默认展示的页面</span>
    <!--
      svg-sprites原生使用: 制作svg太麻烦了..
      借助于svg-sprite-loader 自动得到一个svg精灵图, 默认的symbol的id就是文件名
     -->
    <!-- <svg>
      <use xlink:href="#icon-form" />
    </svg>
    <svg>
      <use xlink:href="#icon-tree" />
    </svg> -->
    <!-- 终极目标 -->
    <!-- <svg-icon icon-class="tree" /> -->
    <UploadExcel :on-success="handleSuccess" :before-upload="beforeUpload" />
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  methods: {
    handleSuccess(obj) {
      console.log('我成功了', obj)
    },
    beforeUpload(file) {
      console.log('上传前校验', file)
      const isLt1M = file.size / 1024 / 1024 < 1

      if (isLt1M) {
        return true
      }

      this.$message({
        message: '文件体积超过1M了',
        type: 'warning'
      })
      return false
    }
  }

}
</script>
<!-- 学习sass 0成本 -> less -->
<!-- /*  sass 是css预处理器的一种 (less stylus)
  默认不高亮 - 下载vscode sass
  两种写法
  1. .sass文件 老的/之前的写法 / 写法比较奇怪 和 stylus几乎一样
    分号, 花括号, 不要写 / 写就报错
  2. .scss -> 新 -> 推荐的 -> 和less几乎一样
*/ -->
<!-- <style lang="sass" scoped>
.dashboard
  width: 400px
  height: 400px
  background-color: teal
  span
    color: pink
</style> -->

<style lang="scss" scoped>
// 嵌套 声明变量
// less 声明变量
// @color: #fff;
// scss 声明变量
// $color: #fff;
// .dashboard {
//   width: 400px;
//   height: 400px;
//   background-color: teal;
//   span {
//     font-size: 25px;
//     color: $color;
//   }
// }
</style>
